import { useEffect, useRef, useState } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import { connect } from 'umi';
import { message } from 'antd';
import { ImageExtend } from 'quill-image-extend-module';
import { ImageDrop } from 'quill-image-drop-module';
import ImageResize from 'quill-image-resize-module';

import 'react-quill/dist/quill.snow.css';
import oss from 'ali-oss';
import moment from 'moment';
import './index.less';

Quill.register(
  {
    'modules/ImageExtend': ImageExtend,
    'modules/ImageDrop': ImageDrop,
    'modules/ImageResize': ImageResize,
  },
  true,
);

// 全局变量
const ossUrl = process.env.OSS_URL;

// 工具栏
const container = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'], // 引用，代码块

  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: 'ordered' }, { list: 'bullet' }], // 列表
  // [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
  [{ indent: '-1' }, { indent: '+1' }], // 缩进
  [{ direction: 'rtl' }], // 文本方向

  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题

  [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
  [{ font: [] }], // 字体
  [{ align: [] }], // 对齐方式

  ['clean'], // 清除字体样式
  ['image'], // 上传图片、上传视频
];

const RichText = (props: {
  dispatch?: any;
  // 样式
  style?: any;
  // 提示语
  placeholder?: any;
  // 业务文件夹
  businessName?: any;
  // 富文本内容
  value?: any;
  // 上传的图片
  fileList?: any;
  // 父组件获取富文本内容
  getContent?: (value: any) => void;
  // 上传图片
  changeFileList?: (file: any) => void;
  // 需要展示的工具
  toolbarList?: any;
  readOnly?: boolean;
}) => {
  const {
    value,
    dispatch,
    placeholder,
    businessName,
    changeFileList,
    fileList,
    readOnly,
    style,
    toolbarList = container,
  } = props;
  const [loading, setLoading] = useState(false);
  const [token, setToken] = useState({});
  const [head, setHead] = useState(null);
  const quillRef = useRef();
  // toolbar配置
  // const [container, toolbarList] = useState([
  //   ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  //   ['blockquote', 'code-block'], // 引用，代码块

  //   [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
  //   [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
  //   // [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
  //   [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
  //   [{ 'direction': 'rtl' }], // 文本方向

  //   [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
  //   [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题

  //   [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
  //   [{ 'font': [] }], // 字体
  //   [{ 'align': [] }], // 对齐方式

  //   ['clean'], // 清除字体样式
  //   ['image'] // 上传图片、上传视频
  // ]);

  const [val, setVal] = useState<string>('');

  useEffect(() => {
    
  }, []);

  // 初始化，获取oss参数
  const init = () => {
    dispatch({
      type: 'aliyunOss/getTemOssAuth',
      payload: {},
      callback: (e: any) => {
        if (e.code === 1) {
          setToken({
            access_key_id: e.data.accessKeyId, // oss的key_id
            access_key_secret: e.data.accessKeySecret, // oss的secret
            OSS_ENDPOINT: e.data.endPoint, // 自己oss服务器的配置信息
            OSS_BUCKET: e.data.bucket, // 自己oss服务器的配置信息
            region: e.data.region,
            sts_token: e.data.securityToken,
          });
          setHead(e.data.head);
          const toolbar = quillRef?.current?.getEditor()?.getModule('toolbar');
          toolbar?.addHandler('image', () => {
            imgUpload(e.data);
          });
        }
      },
    });
  };

  // 生成oss对象
  const client = (tokenData) => {
    return new oss({
      accessKeyId: tokenData.accessKeyId,
      accessKeySecret: tokenData.accessKeySecret,
      region: tokenData.region,
      bucket: tokenData.bucket,
      endpoint: tokenData.endPoint,
      stsToken: tokenData.securityToken,
    });
  };

  const uploadPath = (path, file) => {
    const now = Date.now();
    const fileTypeArr = file.name ? file.name.split('.') : [];
    const fileType = fileTypeArr.length > 0 ? fileTypeArr[fileTypeArr.length - 1] : '';
    const url = fileType
      ? `${path}/${moment().format('YYYYMMDD')}/${now}.${fileType}`
      : `${path}/${moment().format('YYYYMMDD')}/${now}.${file.type.split('/')[1]}`;
    return url;
  };

  const UploadToOss = (tokenData, path, file) => {
    const url = uploadPath(path, file);
    return new Promise((resolve, reject) => {
      client(tokenData)
        .multipartUpload(url, file)
        .then((data) => {
          resolve(data);
        })
        .catch((error) => {
          // console.log('err', error)
          reject(error);
        });
    });
  };

  // // 工具栏
  // const container = [
  //   ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  //   ['blockquote', 'code-block'], // 引用，代码块

  //   [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
  //   [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
  //   [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
  //   [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
  //   [{ 'direction': 'rtl' }], // 文本方向

  //   [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
  //   [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题

  //   [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
  //   [{ 'font': [] }], // 字体
  //   [{ 'align': [] }], // 对齐方式

  //   ['clean'], // 清除字体样式
  //   ['image'] // 上传图片、上传视频

  // ];

  // 工具栏初始化:添加的工具都要初始化，不然无效
  const formats = [
    'header',
    'font',
    'size',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',
    'list',
    'script',
    'bullet',
    'indent',
    'link',
    'image',
    'video',
    'code-block',
    'color',
    'background',
  ];

  // 上传本地文件到oss,存入sys_file表
  const saveOssFile2sysfile = (params, cb) => {
    dispatch({
      type: 'aliyunOss/saveOssFile2sysfile',
      payload: {
        name: params.name,
        type: businessName,
        size: params.size,
        path: params.path,
        sort: params.sort,
      },
      callback: (e) => {
        if (e.code === 1) {
          cb(e.data);
        }
      },
    });
  };
  // 图片上传
  const imgUpload = (tokenData) => {
    const input: any = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.setAttribute('multiple', 'multiple');
    input.click();
    input.onchange = (e: any) => {
      const fileListNew: any = e.target.files;
      const file = e.target.files[0];
      Array.from(input.files).forEach(() => {
        const reader = new FileReader();
        const path = `/saas2/publicFile/${businessName}`;
        reader.readAsDataURL(file);
        reader.onloadend = () => {
          UploadToOss(tokenData, path, file)
            .then((data: any) => {
              fileListNew[0].path = data.name;
              fileListNew[0].url = data.res.requestUrls.toString().split('?')[0].replace(head, '');
              if (fileListNew[0].url) {
                fileListNew[0].url = fileListNew[0].url?.replace('http://', 'https://');
              }

              saveOssFile2sysfile(fileListNew[0], (res: any) => {
                // let arr = fileList.concat()
                // arr.push({
                //   id: res.id,
                //   uid: res.id,
                //   name: res.filename,
                //   path: res.path,
                //   size: res.size,
                //   url: ossUrl + res.path,
                //   type: res.type,
                // });

                const quill = quillRef?.current?.getEditor(); // 获取到编辑器本身
                const cursorPosition = quill.getSelection().index; // 获取当前光标位置
                const link = `${ossUrl + res.path}`;
                quill?.insertEmbed(cursorPosition, 'image', link); // 插入图片
                quill?.setSelection(cursorPosition + 1); // 光标位置加1

                // changeFileList([...arr]);
                setLoading(false);
              });
            })
            .catch((e) => {
              setLoading(false);
              message.error('上传失败');
            });
        };
      });
    };
  };

  useEffect(() => {
    // 没有上传图片功能则不初始化oss
    if (businessName) {
      init();
    }
  }, []);

  // 内容改变触发
  const onChange = (e: any) => {
    // if (value) {
    //   value = e;
    // }
    setVal(e);
    if (props.getContent) {
      // let reTag = /<img(?:.|\s)*?>/g;
      // e = e?.replace(reTag, '')
      props.getContent(e === '<p><br></p>' ? null : e);
    }
  };

  return (
    <div>
      <ReactQuill
        className="react_quill"
        ref={quillRef}
        style={style}
        theme="snow"
        defaultValue={value ?? ''}
        value={val || value || ''}
        onChange={onChange}
        placeholder={placeholder}
        modules={{
          toolbar: toolbarList && toolbarList.length > 0 ? toolbarList : false,
          ImageExtend: true,
          ImageDrop: true,
          ImageResize: {
            modules: ['Resize', 'DisplaySize', 'Toolbar'],
          },
        }}
        formats={formats}
        readOnly={readOnly}
      />
    </div>
  );
};

export default connect(() => ({}))(RichText);
